import React, { useCallback, useState, useEffect } from "react";
import { Form } from "antd";

import config from "src/commons/config-hoc";
import { ModalContent } from "src/library/components";
import { useGet, usePost, usePut } from "src/commons/ajax";
import { FormElement } from "src/library/components";

export default config({
    modal: {
        title: (props) => (props.isEdit ? "修改" : "添加"),
    },
})((props) => {
    const { isEdit, id, onOk, formdata } = props;
    console.log(isEdit, "isEdit");
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState({});
    const [goodsSpecsType, setGoodsSpecsType] = useState(1)
    const [production_time, setProduction_time] = useState('')
    const [form] = Form.useForm();
    const [saving, saveUser] = usePost("/admin/goods/add", {
        successTip: "添加成功！",
    });
    const [updating, updateUser] = usePost("/admin/goods/update", {
        successTip: "编辑成功！",
    });
    const [cateloading, fetchCates] = useGet('/admin/category/list');
    const [cates, setCates] = useState([])

    async function fetchData() {
        if (loading) return;
        console.log(id);

        setData(formdata || {});
        console.log(formdata)
        // form.setFieldsValue(formdata || {});
    }

    async function handleSubmit(values) {
        if (saving || updating) return;

        const ajaxMethod = isEdit ? updateUser : saveUser;
        console.log(values, 'values')
        values.production_time = production_time
        await ajaxMethod(values);

        onOk && onOk();
    }

    const getCates = useCallback(async () => {
        const res = await fetchCates({pid: 0})
        let list = res.data.data
        list = list.map(e => ({label: e.name, value: e.id}))
        console.log(list, 'list')
        setCates(list)
    }, [])

    const goodsSpecsTypeChange = useCallback((e) => {
        setGoodsSpecsType(e)
    }, [])

    useEffect(() => {
        getCates()
        if (isEdit) fetchData();
    }, []);

    const modalLoading = loading || saving || updating;

    const formProps = {
        labelWidth: 130,
    };

    return (
        <ModalContent
            loading={modalLoading}
            okText="保存"
            cancelText="重置"
            onOk={() => form.submit()}
            onCancel={() => form.resetFields()}
        >
            <Form form={form} onFinish={handleSubmit} initialValues={data}>
                {isEdit ? (
                    <FormElement {...formProps} type="hidden" name="id" />
                ) : null}

{/* title	是	string	商品名称
category_id	是	integer	分类id
category_path_id	是	string	分类路径
goods_unit	是	string	商品单位
keywords	是	string	关键字
is_show_stock	是	integer	是否展示库存(0不展示1展示)
production_time	是	date	生产日期
goods_specs_type	是	integer	商品类型(1统一规格2多规格)
description	是	string	商品描述
status	否	integer	商品状态(0不显示1显示)
stock	是/否	integer	库存(商品类型为1时，必填)
price	是/否	decimal	原价(商品类型为1时，必填)
cost_price	是/否	decimal	销售价格(商品类型为1时，必填)
sku	是/否	二维数组	多规格商品数据(商品类型为2时，必填) */}
                <FormElement
                    {...formProps}
                    label="商品名称"
                    name="title"
                    required
                    noSpace
                />
                <FormElement
                    {...formProps}
                    label="所属分类"
                    name="category_id"
                    type="select"
                    required
                    noSpace
                    options={cates}
                />
                <FormElement
                    {...formProps}
                    type="select"
                    label="分类路径"
                    name="category_path_id"
                    required
                    noSpace
                    options={[
                        {value:'0,1', label:'分类路径'},
                    ]}
                />
                <FormElement
                    {...formProps}
                    label="商品单位"
                    name="goods_unit"
                    required
                    noSpace
                />
                <FormElement
                    {...formProps}
                    label="关键字"
                    name="keywords"
                    required
                    noSpace
                />
                <FormElement
                    {...formProps}
                    name="is_show_stock"
                    type="select"
                    label="是否展示库存"
                    required
                    noSpace
                    options={[
                        {label: '显示', value: 1},
                        {label: '隐藏', value: 0},
                    ]}
                />
                
                <FormElement
                    {...formProps}
                    type="date"
                    field="date"
                    label="生产日期"
                    name="production_time"
                    placeholder="请选择生产日期"
                    format="YYYY-MM-DD"
                    onChange={e => setProduction_time(e.format('YYYY-MM-DD'))}
                    required
                    noSpace
                />

                <FormElement
                    {...formProps}
                    type="select"
                    name="goods_specs_type"
                    label="商品类型"
                    required
                    noSpace
                    options={[
                        {label: '统一规格', value: 1},
                        {label: '多规格', value: 2},
                    ]}
                    onChange={goodsSpecsTypeChange}
                />

                <FormElement
                    {...formProps}
                    label="商品描述"
                    name="description"
                    required
                    noSpace
                />
                <FormElement
                    {...formProps}
                    label="商品状态"
                    type="select"
                    name="status"
                    options={[
                        {label: '显示', value: 1},
                        {label: '隐藏', value: 0},
                    ]}
                    required
                    noSpace
                />
                <FormElement
                    {...formProps}
                    label="库存"
                    name="stock"
                    required={goodsSpecsType == 1 ? true : false}
                    noSpace
                />
                <FormElement
                    {...formProps}
                    type="number"
                    label="原价"
                    name="price"
                    required={goodsSpecsType == 1 ? true : false}
                    noSpace
                />
                <FormElement
                    {...formProps}
                    type="number"
                    label="销售价格"
                    name="cost_price"
                    required={goodsSpecsType == 1 ? true : false}
                    noSpace
                />
                <FormElement
                    {...formProps}
                    label="多规格商品数据"
                    name="sku"
                    required={goodsSpecsType == 2 ? true : false}
                    noSpace
                />
            </Form>
        </ModalContent>
    );
});
